<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/nav.css">
  <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
  <script src='../lib/bootstrap-3.3.5-dist/js/jquery-3.6.0.js'></script>
  <script src='../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js'></script>
  <script src='../javascript/nav.js'></script>
  <script src='../javascript/cqhs.js'></script>
  <!-- <script src='../javascript/data.js'></script> -->
  <link rel="stylesheet" href="../css/font_sbdceyn3aud/iconfont.css">
  <title>超期还书</title>
</head>

<body>
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">

      </div>
    </div>
  </div>
  <div id="naviga">
    <div id='logo'>
      <img src="../image/logo.png" alt="">
    </div>
    <ul id="tushu" class="menu">
      <li>图书管理<span class="iconfont icon-xiala"></span></li>
      <li page-data='page1'>还书管理</li>
      <li page-data='page2'>借阅管理</li>
      <li page-data='page3'>新书入库</li>
      <li page-data='page4'>超期还书</li>
      <li page-data='page5'>销书管理</li>
      <li page-data='page6'>图书状态</li>
    </ul>
    <ul id="user" class="menu">
      <li>用户管理<span class="iconfont icon-xiala"></span></li>
      <li page-data='page7'>用户信息</li>
      <li page-data='page8'>黑名单用户</li>
      <li page-data='page9'>借阅记录</li>
      <li page-data='page10'>催还提醒</li>
    </ul>
  </div>
  <div id='top'>
    <div id='shot'>
      <img src="../image/touxiang2.png" alt="">
      <span id="name">

      </span>
      <span class="iconfont icon-xiala"></span>
      <div id='out'>退出</div>
    </div>
  </div>
  <div id='main'>
    <div>
      超期还书
    </div>
    <div class="clear">
      <div id='opera'>
        <button id='piliangdel' onclick="surePlDel()" data-toggle="modal" data-target="#myModal"
          disabled="disabled">批量删除</button>
      </div>
      <div id='enquiry'>
        <select id='enselect' type="text" style="color: rgb(214, 214, 214)">
          <option style="display: none;" value="0" selected>是否丢失书籍</option>
          <option value="1" style="color: black">全部</option>
          <option value="是" style="color: black">是</option>
          <option value="否" style="color: black">否</option>
        </select>
        <input id='entext' type="text" placeholder="输入关键词">
        <button onclick="enquiryData()">查询</button>
      </div>
    </div>
    <table class="table table-striped" algin="center">
      <thead>
        <tr>
          <th><input type="checkbox" class="checks" id="biaotou" onclick="swapCheck()"></th>
          <th>借阅卡号</th>
          <th>用户名</th>
          <th>超期图书</th>
          <th>图书编号</th>
          <th>作者</th>
          <th>借阅日期</th>
          <th>应还日期</th>
          <th>超期天数</th>
          <th>是否丢失</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>
    <nav id='yema' aria-label="Page navigation" class="clear">
      <div id='eachPage' class="dropup">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
          每页10条
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
          <li class='menuPage' value="10">每页10条</li>
          <li class='menuPage' value="20">每页20条</li>
          <li class='menuPage' value="50">每页50条</li>
        </ul>
      </div>
      <ul class="pagination">
        <li>
          <a href="#" aria-label="Previous" id='prev'>
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li>
          <a href="#" aria-label="Next" id='next'>
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
  <script>
    //查询数据
    let bookData = JSON.parse(sessionStorage.getItem('initialData'))
    let resultData = bookData
    //导航菜单高度默认为浏览器高度
    let h = $(window).height()
    $('#naviga').css({
      'height': h + 'px',
    })
    //图书管理和用户管理点击下拉展示菜单
    $('.menu>li:first-child').on('click', function () {
      pullDown($(this))
    })
    //点击菜单跳转至对应页面
    $('.menu>li:first-child').siblings().on('click', function () {
      jumpPage($(this))
    })
    //本地存储page数据，用于页面跳转
    let nowPage = sessionStorage.getItem('page')
    nowPageOut($(`li[page-data$=${nowPage}]`))
    //定义样式
    $('.table').css({
      'margin-bottom': 0
    })
    $('.dropdown-menu').css({
      'min-width': '97px'
    })
    //复选框全选设置默认值
    let checkAll = false
    let ischeck = false
    //设置每页展示条数、当前页默认值
    let eachNum = 10
    let nowPageNum = 1
    //初始渲染数据
    showData(nowPageNum, eachNum)
    //计算最大页数，渲染页码
    let maxPage = Math.ceil(resultData.length / eachNum)
    showPage(maxPage)
    pageColor(nowPageNum)
    //给上一页下一页绑定事件
    $('#prev').on('click', prePage)
    $('#next').on('click', nextPage)
    //选择每页展示条数绑定事件
    $('.menuPage').on('click', function () {
      downPage($(this))
    })
    //根据登录信息显示用户名称
    $('#name').text(sessionStorage.getItem('username'))
    //直接进入页面时需校验登录状态
    let login = sessionStorage.getItem('loginStatus')
    if (login == null) {
      location.href = './login.html'
    }
    //退出登录
    $('#out').on('click', function () {
      location.href = './login.html'
      sessionStorage.removeItem('username')
      sessionStorage.removeItem('loginStatus')
    })
    //给select添加change事件，即选择option后触发
    $('#enselect').on('change', function () {
      if ($('#enselect').val() == 0) {
        $('#enselect').css({
          'color': 'rgb(214, 214, 214)'
        })
      } else {
        $('#enselect').css({
          'color': 'black'
        })
      }
    })
  </script>
</body>

</html>